<template>
  <div class="red">
    <div>我是子路由</div>
    <ul>
      <li>编号：{{ id }}</li>
      <li>标题：{{ title }}</li>
      <li>内容：{{ countent }}</li>
    </ul>
    <div>
      <button @click="countStore.increment">count++</button>
      <p>{{ countStore.count }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { useRoute } from 'vue-router'
// const route = useRoute()
defineProps(['id', 'title', 'countent'])
import { useCounterStore } from '@/stores/counter'
const countStore = useCounterStore()
</script>

<style lang="scss" scoped>
.red {
  background-color: cornsilk;
  width: 500px;
  //   height: 400px;
  border-radius: 4px;
  border: 1px solid skyblue;
}
</style>
